<template>
	<view>
		<u-toast ref="uToast" />
		<view>
			<scroll-view scroll-y="true" class="scroll-y">
				
				<view class="expenditure-list" v-show="list_current == 0">
					<view v-for="(item, index) in account_list" :key="index" style="text-align: center;" @click="selectItem(item.id)">
						<view class="list-box" :class="[select_index==item.id ? 'select-index':'']">
							<image slot="icon" class="box-icon" :src="item.icon" mode="" lazy-load="true"></image>
						</view>
						<view class="box-text" :class="[select_index==item.id ? 'select-text':'']">{{item.text}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="drivider"></view>
		
		<view class="text-input">
			<view class="left-text">
				<text>名称:</text>
			</view>
			<view class="right-textarea">
				<input class="textarea" placeholder="账户名称" type="text" placeholder-class="bbb" v-model="account_name" maxlength="8"/>
			</view>
		</view>
		<view class="text-input">
			<view class="left-text">
				<text>余额:</text>
			</view>
			<view class="right-textarea">
				<input class="textarea" placeholder="0.00" type="digit" placeholder-class="bbb" v-model="account_money" maxlength="10"/>
			</view>
		</view>
		<view class="text-input">
			<view class="left-text">
				<text>备注:</text>
			</view>
			<view class="right-textarea">
				<input class="textarea" placeholder="备注" type="text" placeholder-class="bbb" v-model="remarks" maxlength="20"/>
			</view>
		</view>
		
		
		<view class="button">
			<view class="submit-button">
				<u-button type="primary" icon="edit-pen" text="保存" @click="saveAccount()"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list_current: 0,
				select_index: 1, // 默认选中第一个
				account_name: "现金",
				account_money: '',
				remarks: "",
				account_list:[
					{"id":"1","accountState": 0,"text":"现金","icon":"/static/account/icon/cash.png"},
					{"id":"2","accountState": 0,"text":"微信","icon":"/static/account/icon/wechat.png"},
					{"id":"3","accountState": 0,"text":"支付宝","icon":"/static/account/icon/alipay.png"},
					{"id":"4","accountState": 0,"text":"储蓄卡","icon":"/static/account/icon/savings.png"},
					{"id":"5","accountState": 1,"text":"信用卡","icon":"/static/account/icon/credit.png"},
					{"id":"6","accountState": 1,"text":"花呗","icon":"/static/account/icon/huabei.png"},
					{"id":"7","accountState": 1,"text":"京东白条","icon":"/static/account/icon/JDbaitiao.png"},
					{"id":"8","accountState": 0,"text":"其他","icon":"/static/account/icon/other.png"},
				],
			}
		},
		methods: {
			selectItem(index){
				this.select_index=index;
				this.account_name = this.account_list[index-1].text
			},
			saveAccount(){
				const date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				month = month > 9 ? month : '0' + month
				let day = date.getDate();
				day = day > 9 ? day : '0' + day
				let h = date.getHours()
				let m = date.getMinutes()
				let s = date.getSeconds()
				let accountDate = `${year}-${month}-${day}`
				let accountTime = `${h}:${m}:${s}`
				let params = {
					"userId" : uni.getStorageSync('userId'),
					"accountType" : this.account_list[this.select_index-1].text,
					"accountName" : this.account_name,
					"accountMoney": this.account_money,
					"remarks": this.remarks,
					"accountState": this.account_list[this.select_index-1].accountState,
					"accountDate": accountDate,
					"accountTime": accountTime,
					"accountIcon": this.account_list[this.select_index-1].icon
				}
				const _this = this
				uni.request({
					header: {
						  'Content-Type': 'application/json',
						  'token': uni.getStorageSync('token')
					   }, 
					url: this.$USER_AVATOR_URL.USER_AVATOR_URL+"/account/addaccount",
					method: 'POST',
					data: params,
					success(res) {
						if(res.data.code == 200){
							_this.$refs.uToast.show({
								type: 'success',
								title: '添加成功',
								message: res.data.errorMessage,
								duration: 700,
								complete() {
									uni.switchTab({
										url: '/pages/account/account',
										success: (res) => {
											let page = getCurrentPages().pop();
											if (page == undefined || page == null) return;
											page.onLoad();
										}
										
									})
								},
							})
						}else {
							_this.$refs.uToast.show({
								type: 'error',
								title: '添加失败',
								message: res.data.errorMessage,
								duration: 1000
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.expenditure-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 100rpx;
	}
	.list-box{
		/* background-color: #f4f4f5; */
		/* background-color: #515151; */
		
		
		background-color: #f4f4f5;
		margin: 30rpx 30rpx 0 30rpx;
		border-radius: 100%;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box; 
		
		
		width: 110rpx;
		height: 110rpx;
		display:flex; 
		justify-content:center;
		align-items:center;
		margin-top: 10rpx;
	}
	.box-icon{
		width: 80rpx;
		height: 80rpx;
	}
	.box-text{
		font-size: 30rpx;
		color: #8a8a8a;
	}
	.select-index{
		border-style: solid;
		border-color: #3c9cff;
		border-width: 10rpx;
	}
	.select-text{
		color: #303133;
		/* color: #3c9cff; */
	}

	.drivider {
		height: 20rpx;
		background-color: #c8c9cc;
		margin-top: 30rpx;
	}

	.text-input{
		display: flex;
		flex-wrap: wrap;
		margin-top: 40rpx;
		margin-left: 30rpx;
	}
	.left-text{
		width: 100rpx;
		font-size: 40rpx;
		color: #303133;
		display: flex;
		align-items: center;
	}
	.right-textarea{
		width: 550rpx;
		font-size: 40rpx;
		display: flex;
		align-items: center;
	}
	.button{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 100rpx;
	}
	.submit-button{
		width: 400rpx;
		height: 100rpx;
		font-size: 40rpx;
	}
</style>
